<template>
  <scroll-view 
    class="bill-list"
    scroll-y
    @scrolltolower="$emit('loadMore')"
    @refresherrefresh="$emit('refresh')"
    :refresher-enabled="true"
    :refresher-triggered="loading"
  >
    <view class="bill-item" v-for="item in list" :key="item.id">
      <image class="bill-icon" :src="item.icon" mode="aspectFit" />
      <view class="bill-content">
        <view class="bill-title">{{ item.name }}</view>
        <view class="bill-time">{{ item.time }}</view>
      </view>
      <view class="bill-amount">
        <text class="amount">+{{ item.amount }}</text>
        <!-- <text class="points">+{{ item.amount }}积分</text> -->
      </view>
    </view>
    
    <view class="loading-text" v-if="loading">加载中...</view>
    <view class="no-more" v-if="!hasMore && !loading">没有更多了</view>
  </scroll-view>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { OrderItem } from '@/moduleC/types/order'

@Component
export default class BillList extends Vue {
  @Prop({ required: true }) list!: OrderItem[]
  @Prop({ default: false }) loading!: boolean
  @Prop({ default: true }) hasMore!: boolean
}
</script>

<style lang="scss" scoped>
.bill-list {
  height: calc(100vh - 440rpx);

  .bill-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    margin-bottom: 1px;

    .bill-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
    }

    .bill-content {
      flex: 1;

      .bill-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
      }

      .bill-time {
        font-size: 12px;
        color: #999;
      }
    }

    .bill-amount {
      text-align: right;

      .amount {
        display: block;
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }

      .points {
        font-size: 12px;
        color: #43d534;
      }
    }
  }

  .loading-text,
  .no-more {
    text-align: center;
    padding: 16px;
    color: #999;
    font-size: 14px;
  }
}
</style> 